<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <script src=" https://code.angularjs.org/1.6.4/angular.js">

    </script>
</head>

<body>

    <div ng-controller="myCtrl">
        <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>

        <select>
            <option ng-repeat="x in names">{{x}}</option>
        </select>

        <select ng-model="selectedSite">
            <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
        </select>

        <h1>你选择的是: {{selectedSite}}</h1>

        <select ng-model="selectedSite" ng-options="x.site for x in sites">
        </select>

        <h1>你选择的是: {{selectedSite.site}}</h1>
        <p>网址为: {{selectedSite.url}}</p>

        <select ng-model="selectedSite" ng-options="x for (x, y) in sites">
        </select>

        <h1>你选择的值是: {{selectedSite}}</h1>

        <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
        </select>

        <p>你选择的是: {{selectedCar.brand}}</p>
        <p>型号为: {{selectedCar.model}}</p>
        <p>颜色为: {{selectedCar.color}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {
            $scope.names = ["Google", "Runoob", "Taobao"];
            $scope.sites = [
                { site: "Google", url: "http://www.google.com" },
                { site: "Runoob", url: "http://www.runoob.com" },
                { site: "Taobao", url: "http://www.taobao.com" }
            ];
            $scope.site = {
                site01: "Google",
                site02: "Runoob",
                site03: "Taobao"
            };
            $scope.cars = {
                car01: { brand: "Ford", model: "Mustang", color: "red" },
                car02: { brand: "Fiat", model: "500", color: "white" },
                car03: { brand: "Volvo", model: "XC90", color: "black" }
            };
        });
    </script>

</body>

</html>